<template>
  <div>
    <div class="mb-3">
      <el-button type="primary" @click="edit()">增加电表信息</el-button>
    </div>

    <loading-wrap>
      <table
        class="table table-bordered bg-white"
        v-for="(p, index) of tableData"
        style="text-align: center"
        :key="index"
      >
        <colgroup>
          <col width="15%" />
          <col width="20%" />
          <col width="20%" />
          <col width="15%" />
          <col width="15%" />
          <col width="5%" />
        </colgroup>
        <tr>
          <td>户号</td>
          <td>{{ p.ele_table_no || '-' }}</td>
          <td>户名</td>
          <td colspan="2">{{ p.ele_table_account || '-' }}</td>
          <td>操作</td>
        </tr>
        <tr>
          <td>地址</td>
          <td>{{ p.ele_table_address || '-' }}</td>
          <td>联系电话</td>
          <td colspan="2">{{ p.ele_table_phone || '-' }}</td>
          <!--<td><el-button>电费查询</el-button></td>-->
          <td rowspan="2" style="vertical-align: middle">
            <el-button type="text" class="py-0 px-1" @click="edit(p)">
              <i class="fa fa-edit"></i>
            </el-button>
          </td>
        </tr>
        <tr>
          <td>备注</td>
          <td colspan="4">{{ p.remark || '-' }}</td>
        </tr>
        <tr>
          <td>年月</td>
          <td>电费</td>
          <td>同比增长</td>
          <td>电量</td>
          <td colspan="2">同比增长</td>
        </tr>
        <tr v-if="!p.data">
          <td colspan="6">暂无数据</td>
        </tr>
        <tr v-for="(d, index) of p.data" :key="index">
          <td>{{ d.ele_date || '-' }}</td>
          <td>{{ d.ele_fee || '-' }}</td>
          <td>{{ d.fee_compare || '-' }}</td>
          <td>{{ d.ele_amount || '-' }}</td>
          <td colspan="2">{{ d.ele_amount_compare || '-' }}</td>
        </tr>
      </table>
    </loading-wrap>

    <form-component
      :visible.sync="editVisible"
      :form-append="{ customer_id: 'customer_id' }"
      title="添加电表"
      :table-name="tableName"
      :form-data="formData"
      :table-id="tableId"
      :table-data="editData"
      :auto-init="false"
      @success="getData"
    >
      <el-button
        slot="button"
        type="primary"
        v-show="ImportVisible"
        class="btn-long"
        @click="showDialogImport"
      >
        导入电费信息
      </el-button>
    </form-component>

    <import-excel
      :visible.sync="dialogImportVisible"
      title="导入电费信息"
      :post-api="postUrl"
      excel-template="/static/files/电费电量导入模板.xlsx"
      @success="colose"
    ></import-excel>
  </div>
</template>
<script>
import FormComponent from '@/components/FormComponent'
import ImportExcel from '@/components/ImportExcel'

export default {
  components: {
    FormComponent,
    ImportExcel,
  },
  props: {},
  data() {
    return {
      tableName: 'datum_customer_ele_table',
      editVisible: false,
      tableData: [],
      ImportVisible: false,
      postUrl: '',
      tableId: '',
      editData: {},
      customerId: '',
      formData: {
        ele_table_no: { type: 'text', label: '户号', value: '', required: true },
        ele_table_account: { type: 'text', label: '户名', value: '', required: true },
        ele_table_address: { type: 'text', label: '地址', value: '' },
        ele_table_phone: { type: 'text', label: '联系电话', value: '' },
        remark: { type: 'text', label: '备注', value: '' },
        business_fac_type: {},
      },
      dialogImportVisible: false,
    }
  },
  computed: {},
  watch: {},
  created() {
    this.customerData = JSON.parse(sessionStorage.getItem('customer_related_view'))
    this.customerId = this.customerData.customer_id
    this.id = this.$route.query.id || sessionStorage.getItem('customer_related_id')
    this.getData()
  },
  mounted() {},
  methods: {
    getData() {
      this.$api
        .getData('credit', this.tableName, {
          'customer_related_id.eq': this.id,
        })
        .then(res => {
          if (!res.data) {
            return
          }
          this.tableData = res.data
          for (let p of this.tableData) {
            this.$api
              .getData('credit', 'datum_customer_ele_fee', {
                'credit_ele_table_id.eq': p.credit_ele_table_id,
              })
              .then(res => {
                this.$set(p, 'data', res.data)
              })
          }
        })
    },
    edit(p) {
      this.editVisible = true
      this.tableId = p ? p.credit_ele_table_id : ''
      this.ImportVisible = !!p
      this.postUrl = p
        ? '/api/credit/import/?importKey=datum_customer_ele_fee_template&where=' +
          encodeURIComponent(
            '"datum_customer_ele_fee.credit_ele_table_id".eq(' + p.credit_ele_table_id + ')'
          )
        : ''
      this.editData = p
    },
    colose() {},
    showDialogImport() {
      this.dialogImportVisible = true
    },
    // deleteData(item) {
    //       const h = this.$createElement
    //       this.$msgbox({
    //           title: '提示',
    //           message: h('span', undefined, `确定删除？`),
    //           showCancelButton: true,
    //           confirmButtonText: '确定',
    //           cancelButtonText: '取消',
    //           beforeClose: async (action, instance, done) => {
    //           if (action === 'confirm') {
    //           instance.confirmButtonLoading = true
    //           instance.confirmButtonText = '删除中...'
    //           const [res] = await this.$utils.promise(this.$api.deleteData('credit', this.tableName, item.credit_ele_table_id))
    //           instance.confirmButtonLoading = false
    //           instance.confirmButtonText = '确定'
    //           if (res) {
    //               this.$message.success('删除成功！')
    //               this.getData()
    //               done()
    //           } else {
    //               this.$message.error('删除失败，请重试！')
    //           }
    //       } else {
    //           done()
    //       }
    //   }
    //   })
    //   }
  },
}
</script>
<style scoped></style>
